<template>
  <el-dialog
    v-model="dialogVisible"
    title="添加自定义设备模板"
    width="80%"
    :close-on-click-modal="false"
    :before-close="rest"
  >
    <el-form :model="form" label-width="auto" label-position="top">
      <el-row :gutter="28">
        <el-col :span="12">
          <el-form-item label="设备名称">
            <el-input v-model="form.DevicetypeName" style="width: 82%" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="请选择设备接入的COM口">
            <el-select v-model="form.ComPort" placeholder="请选择COM" style="width: 82%" clearable>
              <el-option
                v-for="item in comList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <div>设备属性</div>
          <el-form-item style="display: flex">
            <div
              v-for="(item, index) in form.property"
              :key="index"
              style="width: 40%; margin: 0 8% 0 0"
            >
              <div
                v-if="item.type === 'write'"
                :style="index === 1 ? { 'margin-left': '2.5rem', width: '100%' } : {}"
              >
                <div>{{ item.propertyName }}</div>
                <el-input v-model="item.RegisterValue" placeholder="请输入" />
              </div>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="rest"> 取消 </el-button>
        <el-button type="primary" @click="submit"> 确定 </el-button>
      </span>
    </template>
  </el-dialog>
</template>
  
<script>
import { ref, reactive, onMounted } from 'vue'
import { useStore } from 'vuex'
import MyJson from '../../MyJson/DeviceProperties.json'

import { v4 as uuidv4 } from 'uuid'
import { ElMessage } from 'element-plus'
export default {
  setup(_, { emit }) {
    // 页面显示隐藏
    const dialogVisible = ref(false)
    // 拿到所有的com口
    const comList = ref([])

    const form = ref({
      DeviceVariable: 'UNAVAILABLE',
      isVirtual: 'IS_NOT_VIRTUAL',
      name: '',
      BaudRate: 9600,
      ComPort: '',
      DevicetypeName: '',
      DevicetypeValue: 0,
      isShow: 'write',
      amplitude: '0',
      delay: '1',
      sensorType: 'Register',
      property: [
        {
          statusName: 'outputRegister',
          propertyName: '输出寄存器',
          rendermod1: '-1',
          statusval: '',
          rendermod2: '11',
          type: 'write',
          DataType: 'R',
          renderModel: 'select',
          TypeSelection: 'STATUS',
          value: '',
          RegisterValue: ''
        },
        {
          statusName: 'inputRegister',
          propertyName: '输入寄存器',
          rendermod1: '-1',
          statusval: '',
          rendermod2: '11',
          type: 'write',
          DataType: 'R',
          renderModel: 'input',
          TypeSelection: 'STATUS',
          value: '',
          RegisterValue: ''
        },
        {
          statusName: 'stepping',
          propertyName: '间隔时间',
          rendermod1: '0',
          statusval: '',
          rendermod2: '-1',
          type: 'none',
          DataType: 'R',
          renderModel: 'input',
          TypeSelection: 'STATUS',
          value: '0',
          RegisterValue: ''
        }
      ]
    })

    // 寄存器地址
    const addres = ref('')
    // 拿到所有的COM接口
    const getComAll = async () => {
      try {
        const res = await window.api.getCOM()
        comList.value = res.map((item) => {
          return {
            label: item.path,
            value: item.path
          }
        })
      } catch (error) {
        console.error('Error fetching COM list:', error)
      }
    }
    // 取消
    const rest = () => {
      close()
    }

    // 确定
    const submit = () => {
      const res = window.api.insertCustomDeviceType(JSON.stringify(form.value))
      if (res === '新增成功') {
        ElMessage.success(res)
        emit('update')
        close()
      } else {
        ElMessage.error(res)
      }
    }

    // 清除输入框
    const close = () => {
      dialogVisible.value = false
      form.value = {
        DeviceVariable: 'UNAVAILABLE',
        isVirtual: 'IS_NOT_VIRTUAL',
        name: '',
        BaudRate: 9600,
        ComPort: '',
        DevicetypeName: '',
        DevicetypeValue: 0,
        isShow: 'read',
        amplitude: '0',
        delay: '1',
        sensorType: 'Register',
        property: [
          {
            statusName: 'outputRegister',
            propertyName: '输出寄存器',
            rendermod1: '0',
            statusval: '',
            rendermod2: '-1',
            type: 'write',
            DataType: 'R',
            renderModel: 'select',
            TypeSelection: 'STATUS',
            value: '',
            RegisterValue: ''
          },
          {
            statusName: 'inputRegister',
            propertyName: '输入寄存器',
            rendermod1: '0',
            statusval: '',
            rendermod2: '-1',
            type: 'write',
            DataType: 'R',
            renderModel: 'input',
            TypeSelection: 'STATUS',
            value: '',
            RegisterValue: ''
          },
          {
            statusName: 'stepping',
            propertyName: '间隔时间',
            rendermod1: '0',
            statusval: '',
            rendermod2: '-1',
            type: 'none',
            DataType: 'R',
            renderModel: 'input',
            TypeSelection: 'STATUS',
            value: '0',
            RegisterValue: ''
          }
        ]
      }
    }
    onMounted(() => {
      getComAll()
    })
    return {
      form,
      dialogVisible,
      comList,
      addres,
      submit,
      rest,
      getComAll
    }
  }
}
</script>
  
  <style>
</style>